<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico?v=5.1.1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Vendor styles -->
    <link rel="stylesheet" href="/js/bower_components/animate.css/animate.min.css">

    <!-- App styles -->
    <link rel="stylesheet" href="/css/app.min.css">
    <link rel="stylesheet" href="/js/vue/element-ui/lib/theme-chalk/index.css">
</head>

<body data-ma-theme="green">
<div class="page-loader">
    <div class="page-loader__spinner">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
<div class="login" id="app">

    <!-- Login -->
    <div class="login__block active" id="l-login">
        <h2 style="padding: 20px 0">Tumo Register</h2>
        <div class="login__block__body">
            <div class="form-group form-group--float">
                <input v-model="username" type="text" class="form-control" placeholder="用户名">
                <i class="form-group__bar"></i>
            </div>

            <div class="form-group form-group--float">
                <input v-model="password" type="password" class="form-control" placeholder="密码">
                <i class="form-group__bar"></i>
            </div>

            <div class="form-group form-group--float">
                <input v-model="email" type="text" class="form-control" placeholder="邮箱">
                <i class="form-group__bar"></i>
            </div>

            <button @click="handleRegister" type="button" class="btn btn-success btn-block">注册</button>
            <br/>
            <a href="/login">已有账户？去登录</a>
            <br/>
            <br/>
            <p>版权所有 ©TyCoding 2018-2020.</p>
        </div>
    </div>
</div>

<!-- Javascript -->
<!-- Vendors -->
<script src="/js/bower_components/jquery/jquery.min.js"></script>
<script src="/js/bower_components/tether/js/tether.min.js"></script>
<script src="/js/bower_components/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/bower_components/Waves/waves.min.js"></script>

<!-- App functions and actions -->
<script src="/js/app.min.js"></script>
<script src="/js/vue/vue.min.js"></script>
<script src="/js/vue/vue-resource.min.js"></script>
<script src="/js/vue/element-ui/lib/index.js"></script>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            email: ''
        },
        methods: {
            handleRegister() {
                if (this.username === '' || this.password === '' || this.email === '') {
                    this.$message.error('请完整填写表单')
                    return;
                }
                let pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                if (!pattern.test(this.email)) {
                    this.$message.error('邮箱格式错误，请重新填写')
                    return;
                }
                $(".page-loader").fadeIn()
                let _$ = $
                this.$http.post(
                    '/register',
                    JSON.stringify({username: this.username, password: this.password, email: this.email})
                ).then(res => {
                    if (res.body.code == 200) {
                        _$(".page-loader").fadeOut()
                        this.$confirm('注册成功，去登录？', '提示', {
                            confirmButtonText: '确定',
                            type: 'success',
                        }).then(() => {
                            window.location.href = '/login'
                        })
                    } else {
                        _$(".page-loader").fadeOut()
                        this.$message.error(res.body.msg)
                    }
                }).catch(() => {
                    _$(".page-loader").fadeOut()
                    this.$message.error('请求连接失败，请稍后重试')
                })
            }
        },
    })
</script>
</body>
</html>
